<template>
	<view class="Global">


		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<!-- <view class="personnel" :style="{'height':tarbarHeight+'px'}">
			<image @click="backOnClick" src="../../../static/left_arrow.png" class="backImg" mode=""></image>
			<text class="title">{{personnelInfo}}</text>
		</view> -->
		<MyNav :title="title" bgColor="" :backIcon="isback"  id="main"></MyNav>


		<scroll-view scroll-y="true" class="ContentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view>

				<view class="contentCenter">

					<view class="listContent">

						<view class="contentItem">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">工号</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<input @input="onInputAccount" class="contentItemTextRight" type="text" :value="addUserData.userName"
								placeholder="请输入" />
						</view>

						<view class="lineBg"></view>

						<view class="contentItem2">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">姓名</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
							<input @input="onInputAccountName" class="contentItemTextRight" type="text"  :value="addUserData.nickName"
								 placeholder="请输入" />
						</view>
						<view class="lineBg"></view>


						<view class="contentItem2">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">手机号码</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<input @input="onInputAccountPhone" class="contentItemTextRight" type="text"  :value="addUserData.phonenumber"
								 placeholder="请输入" />
						</view>
						<view class="lineBg"></view>

						<view class="contentItem2" @click="toChoose(query,2,true,'部门')">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">所属部门</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>

								<view class="contentItemTextLeftContentRight">
									<text class="contentItemTextLeftContentRightText">{{addUserData.dept.deptName}}</text>
										<uni-icons class="contentItemTextLeftContentRightIcon" type="down" size="14"></uni-icons>
<!--                  <ljs-treeChoose-->
<!--                      v-model="ljs_tree3.department"-->
<!--                      :ids="ljs_tree3.chooseIds"-->
<!--                      :checkStrictly="ljs_tree3.checkStrictly"-->
<!--                      chooseMode="ico"-->
<!--                      @getChooseValue="ljs_tree3GetChooseValue">-->
<!--                  </ljs-treeChoose>-->
								</view>
						</view>


						<view class="contentsalaryContent">
							<text class="contentItemTextLeft">薪资设置</text>

<!--              <uni-data-checkbox style="margin-left: 50rpx;margin-top: 20rpx" mode="tag" multiple v-model="checkSalarys" :localdata="hobby" @change="checkboxChange"></uni-data-checkbox>-->

							<view class="contentsalaryContentBottom" >


								<view class="contentItemSalary" >

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">基本工资</text>

									</view>
									<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
									<input @input="onInputBasicSalary" class="contentItemTextRight" type="text" v-model="addUserData.basicSalary"
										placeholder-class="contentItemTextRight" placeholder="请输入" />
								</view>
              </view>
              <view class="contentsalaryContentBottom" >
								<view class="contentItemSalary" >

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">计件</text>

									</view>
									<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
									<input @input="onInputPieceworks" class="contentItemTextRight" type="text" v-model="addUserData.pieceworks"
										placeholder-class="contentItemTextRight" placeholder="请输入" />
								</view>
              </view>
              <view class="contentsalaryContentBottom" >
								<view class="contentItemSalary" >

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">计时</text>

									</view>
									<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
									<input @input="onInputWorkingHours" class="contentItemTextRight" type="text" v-model="addUserData.workingHours"
										placeholder-class="contentItemTextRight" placeholder="请输入" />
								</view>
              </view>

              <view class="contentsalaryContentBottom" >
								<view class="contentItemSalary" >

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">月薪</text>

									</view>
									<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
									<input @input="onInputMonthlyPay" class="contentItemTextRight" type="text" v-model="addUserData.monthlyPay"
										placeholder-class="contentItemTextRight" placeholder="请输入" />
								</view>
							</view>

						</view>

					</view>

				</view>






			</view>
		</scroll-view>
		<view class="loginContent" id="mainBottom">

			<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>


	</view>
</template>

<script>
		import stringUtil from '@/pages/common/stringUtil.js';
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import {
		updateUserManager,getSalartInfo,getDeptManager
	} from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				title: '修改',
				isback: true,

				personnelInfo: '新增',
				tops: 0,
				height: 0,
				tarbarHeight: 0,
				login: '确认',
				manualEntryIsAllowed: '允许手工入菲',
				onlyTheDefaultProcedureIsEntered: '只入默认工序',
				removePhenanthrene: '删除菲',

        checkSalarys: [],
        checkData: [],
        checkVale: '',
        ljs_tree3: {
          departmentTag: false,
          department: [],
          departmentName: "",
          checkStrictly: true, // 任意级都可选
          chooseIds: [100, 101], // 选择tree的id数据结果集合
        },
        hobby: [
            {
            text: '基本薪资',
            value: 'basic_salary'
            },
            {
              text: '计时',
              value: 'working_hours'
            },
            {
              text: '计件',
              value: 'pieceworks'
            },
          {
            text: '月薪',
            value: 'monthly_pay'
          }
        ],
				addUserData: {

				},

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
        query: [],


			}
		},

		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop - 60
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();



		},
    onShow() {
      //兼容小程序,获取选中的值
      //#ifdef MP-WEIXIN||MP-QQ
      // let pages = getCurrentPages();
      // let currPage = pages[pages.length - 1];
      // this.query = currPage.data.query;
      // console.log('query',this.query)
      var that = this
      uni.$on('globleEvent', function (res) {
        // console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
        that.query = res.deptData
        console.log('query', that.query) //  为 B 页面传过来的值
        // 移除监听事件
        uni.$off('globleEvent');
      })
      if(this.query != null && this.query.length>0){
        console.log('this.query[0]',this.query[0])
        this.addUserData.deptId = this.query[0].id
        this.addUserData.dept.deptId = this.query[0].id
        this.addUserData.dept.deptName = this.query[0].label
        console.log('addUserData',this.addUserData)
        this.$forceUpdate()
      }

      // #endif
    },
		onLoad: function(option) {
			let item = JSON.parse(decodeURIComponent(option.item));
      console.log('数据传递了', item); // 打印出传递的复杂参数
			this.addUserData = item
      this.query.push({id:this.addUserData.deptId,label: this.addUserData.dept.deptName})
      console.log("query=>", this.query);
      if(this.addUserData.userId){
        this.getSalartInfo(this.addUserData.userId);
      }
      // this.getDeptList();
		},

		methods: {
      getDeptList(){
        const app = getApp();
        let storeId = app.globalData.storeId
        let tenantId = app.globalData.tenantId
        let data = {
          storeId: storeId,
          tenantId: tenantId,
        }
        getDeptManager(data).then((res) => {
          this.ljs_tree3.department = res.data
        })
      },
      ljs_tree3GetChooseValue(ids, items){
        console.log(ids, items)
        this.ljs_tree3.chooseIds = ids;
      },
      toChoose(item, type, isCheck = false ,title = '') {
        // #ifdef H5
        let items = encodeURIComponent(JSON.stringify(this.query));
        // #endif
        // #ifdef MP-QQ||MP-WEIXIN
        let items = JSON.stringify(this.query);
        // #endif
        uni.navigateTo({
          url: `/subPack/departmentManagement/departmentManagement/chooseDept?arr=${items}&type=${type}&isCheck=${isCheck}&title=${title}`
        })
      },
      getSalartInfo(userId){
        getSalartInfo(userId).then(res=>{
          if(res.code==200){
            let data = res.data;
            this.addUserData.checkSalarys = data.checkSalarys
            this.checkSalarys = data.checkSalarys
            this.checkData = data.checkSalarys
            if(this.addUserData.checkSalarys.length>0){
              this.checkVale = this.addUserData.checkSalarys[0]
            }
            this.addUserData.basicSalary = data.basicSalary
            this.addUserData.pieceworks = data.pieceworks
            this.addUserData.workingHours = data.workingHours
            this.addUserData.monthlyPay = data.monthlyPay
          }
        })
      },
			// 获取编号输入框的值
			onInputAccount(e) {
				this.addUserData.userName = e.detail.value

			},onInputAccountName(e) {
				this.addUserData.nickName = e.detail.value

			},onInputAccountPhone(e) {
				this.addUserData.phonenumber = e.detail.value

			},onInputAccountPass(e) {
				this.addUserData.password = e.detail.value

			},onInputAccountDepartmen(e) {
				this.addUserData.dept.deptName = e.detail.value
			},
      onInputBasicSalary(e) {
        this.addUserData.basicSalary = e.detail.value
      },
      onInputWorkingHours(e) {
        this.addUserData.workingHours = e.detail.value
      },
      onInputPieceworks(e) {
        this.addUserData.pieceworks = e.detail.value
      },
      onInputMonthlyPay(e) {
        this.addUserData.monthlyPay = e.detail.value
      },
			/* onInputAccountEmail(e){
				this.addUserData.email = e.detail.value
			}, */
      checkboxChange(e){
        console.log('checkSalarys',this.checkSalarys)
        console.log('eeeee',e)
        if(this.checkSalarys.length==0){
          this.checkVale = ''
        }
        if(this.checkSalarys.length==1){
          this.checkVale = this.checkSalarys[0]
        }
        if(this.checkSalarys.length>1){
          if(this.checkSalarys.length>this.checkData.length){
            let difference = this.checkSalarys.filter(x => !this.checkData.includes(x));
            console.log('difference',difference)
            this.checkVale = difference[0]
          }
          if(this.checkSalarys.length<this.checkData.length){
            this.checkVale = this.checkSalarys[this.checkSalarys.length-1]
          }
        }
        this.checkData = this.checkSalarys
      },
			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				console.log('点击返回');
			},
			// 新增数据
			AddData(){
        console.log('111111');
				if(stringUtil.isEmpty(this.addUserData.userName)||
				stringUtil.isEmpty(this.addUserData.nickName)||
				stringUtil.isEmpty(this.addUserData.phonenumber)
				){
					return
				}
        this.addUserData.checkSalarys = this.checkSalarys
				const app = getApp();
				this.addUserData.storeId = app.globalData.storeId
				this.addUserData.tenantId = app.globalData.tenantId
        console.log('222222');
				// 修改
				updateUserManager(this.addUserData).then((res) => {
					// console.log('新增数据', res);

					if (res.code == 200) {
						// 表示添加成功 则返回上一页

						this.backOnClick()

					}
					// 显示提示信息
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});

				}).catch((err) => {
					console.log('修改失败', err);
				});
			}

		}
	}
</script>

<style>

	.contentItemTextLeftContentRightIcon{
		margin-right: 30rpx;
	}

	.contentItemTextLeftContentRightText{
		display: flex;
		margin-right: 30rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 120rpx;
	}
	.contentItemTextLeftContentRight{

		display: flex;
		align-items: center;

	}
	.contentItemSalary {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		height: 120rpx;

		border-bottom: #EEE solid 1rpx;

	}
	.contentsalaryContentBottom{
		margin-top: 20rpx;
		width: 630rpx;
		height: 120rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		margin-left: 30rpx;

	}

	.contentsalaryContent{

		display: flex;
		justify-content: center;
		flex-direction: column;
    margin-top: 20rpx;
		width: 100%;
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;

		bottom: 30rpx;


	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-bottom: 20rpx;


		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}


	.contentItem4 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: bisque;
	}

	.labelContent {
		font-size: 20rpx;
		font-weight: 600;
	}

	.contentItem3 {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		width: 100%;
		height: 120rpx;

	}

	.ContentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;

		border-radius: 30rpx;

		background: #FFFFFF;

		height: 900rpx;
	}

	.contentCenter {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;

		border-radius: 30rpx;

		background: #FFFFFF;
	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 690rpx;





	}

	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;
	}

	.Global {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;

	}

	.contentItemTextRight {
		/*font-size: 28rpx;*/
		/*font-weight: 600;*/
		/*color: #666666;*/
		/*margin-right: 30rpx;*/
		/*width: 200rpx;*/
		/*text-align: right;*/
    width: 320rpx;
    font-size: 24rpx;
    color: #666666;
    font-weight: 600;
    display: flex;
    justify-content: right;
    align-items: center;
    margin-right: 30rpx;
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 30rpx;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;



	}



	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;

		border-radius: 30rpx 30rpx 0 0;


	}
</style>
